:root {
  --c-white: #ffffff;
  --c-white-soft: #f8f8f8;
  --c-white-mute: #f2f2f2;

  --c-black: #1b1b1f;
  --c-black-soft: #222222;
  --c-black-mute: #282828;

  --c-gray-1: #515c67;
  --c-gray-2: #414853;
  --c-gray-3: #32363f;
}

:root {
  --c-text-1: rgba(0, 0, 0, 0.86);
  --c-text-2: rgba(0, 0, 0, 0.6);
  --c-text-3: rgba(0, 0, 0, 0.38);

  --c-background: var(--c-white);
  --c-background-soft: var(--c-white-soft);
  --c-background-mute: var(--c-white-mute);

  --c-hover: rgba(0, 0, 0, 0.1);
  --c-active: rgba(0, 0, 0, 0.2);
}

html.dark {
  --c-text-1: rgba(255, 255, 245, 0.86);
  --c-text-2: rgba(235, 235, 245, 0.6);
  --c-text-3: rgba(235, 235, 245, 0.38);

  --c-background: var(--c-black);
  --c-background-soft: var(--c-black-soft);
  --c-background-mute: var(--c-black-mute);

  --c-hover: rgba(255, 255, 255, 0.1);
  --c-active: rgba(255, 255, 255, 0.2);
}
